<template>
   <div class="container">
    <div class="background-image"></div>
    <div class="content">
      <div class="view-profile">
        <!-- {{ articleId }} -->
        <!-- <div v-html="article.content"></div> -->
        <Editor v-model="article.content" />
      </div>
      
        <Comment :articleId="articleId"></Comment>
      
    </div>
  </div>
</template>

<script>
import jwtDecode from 'jwt-decode';
import axios from 'axios';
import Comment from './Comment.vue'

import '@wangeditor/editor/dist/css/style.css'
import { Editor } from '@wangeditor/editor-for-vue'

export default {
  components:{
        'Comment':Comment,
        Editor
    },
  data() {
    return {
      article:{
        content:null
      },
      articleId:null,
      userId: null
    };
  },
  created() {
    this.articleId = this.$route.query.articleId;
    this.userId = this.getUserIdFromToken();
    this.fetchPets();
  },
  methods: {
    fetchPets() {

        axios.get(`/api/article/${this.articleId}`, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          }
        })
        .then(response => {
          // console.log("Pets data received:", response.data);
          this.article = response.data[0];

          console.log(this.article)





        })
        .catch(error => {
          console.error("获取宠物信息失败:", error);
        });

    },

    getUserIdFromToken() {
      const token = localStorage.getItem('token');
      if (token) {
        const decoded = jwtDecode(token);
        // console.log("Decoded token:", decoded);
        const userId = decoded.userId;
        // console.log("Parsed userId from token:", userId);
        return userId; // 确保 JWT 中有 userId 字段
      }
      return null;
    }




  }
}

</script>

<style scoped>

.container {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 确保容器高度随内容变化 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 使内容从顶部开始对齐 */
  background-color: #000; /* 备用背景颜色 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/background.jpg'); /* 使用相对路径引入图片 */
  background-size: cover; /* 确保背景图片覆盖整个容器 */
  background-repeat: no-repeat;
  background-attachment: fixed; /* 背景图片随页面滚动 */
  background-position: center;
  opacity: 0.8; /* 根据需要调整透明度 */
}

.content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.view-profile {
  min-height: 500px;
  width: 80%;
  border-radius: 15px;
  padding: 20px;

  background-color: rgb(255,255,255, .9);
}

.comment {
  margin-top: 15px;
  min-height: 100px;
  width: 80%;
  border-radius: 5px;
  padding: 20px;
  background-color: rgb(255,255,255, .9);
}
</style>
